<template>
  <div id="home">
    <Header @toAnchor="toAnchor"></Header>
    <!-- 轮播图区域 -->
    <div class="slide-wrapper">
      <Slide></Slide>
    </div>
    <!-- 内容板块 -->
    <div class="content-wrapper">
      <!-- 关于我 -->
      <section class="about-me">
        <AboutMe></AboutMe>
      </section>
      <!-- Demo -->
      <section class="demo">
        <Demo></Demo>
      </section>
      <!-- 文章列表 -->
      <section class="article-list">
        <ArticleList></ArticleList>
      </section>
      <section>
        <Resume></Resume>
      </section>
    </div>
    <Footer></Footer>
    <ScrollToTop />
  </div>
</template>

<script >
import Header from "../components/Header";
import Footer from "../components/Footer";
import Slide from "../components/Slide";
import AboutMe from "../components/AboutMe";
import Demo from "../components/Demo";
import ArticleList from "../components/ArticleList";
import Resume from "../components/Resume";
import { defineComponent, onActivated, onDeactivated } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "home",
  components: {
    AboutMe,
    ArticleList,
    Header,
    Footer,
    Slide,
    Demo,
    Resume,
  },
  setup() {
    const store = useStore();
    const scrollCb = () => {
      store.commit("setScroll");
    };
    //活跃时启动监听滑动事件
    onActivated(() => {
      const anchor = localStorage.getItem("anchor");
      anchor && document.getElementsByClassName(anchor)[0].scrollIntoView();
      localStorage.setItem("anchor", "");
      document.addEventListener("scroll", scrollCb);
    });
    //离开后停止监听滑动事件
    onDeactivated(() => {
      document.removeEventListener("scroll", scrollCb);
    });
    //点击跳转锚点
    const toAnchor = (tar) => {
      const el = document.getElementsByClassName(tar)[0];
      el.scrollIntoView({ behavior: "smooth" });
    };
    return {
      toAnchor,
    };
  },
});
</script>